<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
		#comtainer{
		width: 100%;
			height: 800px;
		display: flex;
		justify-content: center;
		
		}
		#outdiv{
			width: 600px;
			height: 500px;
			overflow: hidden;
		}
		#imgg{
			width: 1600px;
			height: 100px;
			display: flex;
		align-items: center;
		justify-content: center;

		margin-top: 200px;
		}
          #imgg img{
	width: 100px;
	height: 100px;;
      }

		</style>
	</head>
	<body>
		<div id="comtainer">
			<div id="outdiv">
				<div id="imgg" onmouseenter="doMouseEnterAction()" onmousemove="doMouseEnterAction()">
				<img src="img/1.jpeg" >
					<img src="img/2.jpeg" >
						<img src="img/3.jpeg" >
							<img src="img/4.jpeg" >
								<img src="img/5.jpeg" >
									<img src="img/6.jpeg" >
										<img src="img/7.jpeg" >
											<img src="img/8.jpeg" >
												<img src="img/9.jpeg" >
													<img src="img/10.jpeg" >
					
					
					
				</div>
			</div>
			
			
		</div>
		
	</body>
	<script type="text/javascript">
			var imgListObj = document.getElementById('imgg');
				var marginLeft = 0;
				var myinteral = null;
function doAction(){
			if(marginLeft==-1000){
				marginLeft=0
			}
			marginLeft--;
			imgListObj.style.marginLeft = marginLeft+'px';
			if(marginLeft%100==0){
				clearInterval(myinteral);
				setTimeout(function(){
					myinteral = setInterval(doAction,50);
				},1000)
			}
		}

		function doMouseLeaveAction(){
			console.log('11111111')
			myinteral = setInterval(doAction,50);
		}
		onload = function(){
			myinteral = setInterval(doAction,50)
		}
		 
		
		
	</script>
</html>
